<template>
  <m-page :primary="['#2b85e4']">
    <template #head>
      <m-navbar bg-color="#FFF" :title="title" />
    </template>

    <div class="m-card">
      <van-cell-group inset>
        <van-field v-model="mobile" label="新手机号" clearable placeholder="请输入新的手机号" />
        <van-field v-model="code" label="短信验证码" clearable placeholder="请输入验证码">
          <template #button>
            <van-button type="primary" size="small">发送验证码</van-button>
          </template>
        </van-field>
      </van-cell-group>

      <div class="m-btn">
        <van-button type="primary" block round>提交</van-button>
      </div>

      <!-- <m-panel title=""></m-panel> -->
    </div>
  </m-page>
</template>
<script setup>
import { ref } from 'vue'

const title = ref('更换手机号')
const mobile = ref('')
const code = ref('')
// mobile email code type sms 手机号绑定

// definePageMeta({
//   middleware: 'auth'
// })
</script>
<style lang="less" scoped>
.m-card {
  padding: 10px 0;
  .van-cell-group--inset {
    margin: 12px;
  }
  .m-btn {
    padding: 10px 16px;
  }
}
</style>
